<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta content="webkit" name="renderer" />
  	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="<%=basePath%>">
    
    <title>基于WEB的人脸识别考勤系统——控制台</title>
    
	<!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="layui/css/layui.css" media="all">
  </head>
  
  <body style="padding-top: 0px">
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    	<h1 class="page-header">课程管理/
    		<span class="text-muted">Course management</span>
    		<button class="layui-btn layui-btn-primary layui-btn-xs" id="refresh">
		  		<i class="layui-icon layui-icon-refresh-3"></i>刷新
		  	</button>
    	</h1>
    	<div class="layui-form" id="search">
		 	<div class="layui-inline">
      			课程ID：
      			<div class="layui-input-inline" style="width:120px;">
        			<input name="cid"  id="cid" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>	
		 	<div class="layui-inline">
      			名称：
      			<div class="layui-input-inline" style="width:120px;">
        			<input name="cname"  id="cname" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>	

		 	
		 	<div class="layui-inline">
      			班级：
      			<div class="layui-input-inline" style="width:120px;">
        			<input name="sclass"  id="sclass" autocomplete="off" class="layui-input" type="text">
      			</div>
    		</div>
    		
		 	<div class="layui-inline">
      			教师：
      			<div class="layui-input-inline" style="width:120px;">
        			<select name="tname" id="tname" lay-verify="" lay-search="">
				         <option value="">选择</option>
				         <option value="蔡老师">蔡老师</option>
				         <option value="独木林空">独木林空</option>
				    </select>
      			</div>
    		</div>
		 	
		 	<div class="layui-inline">
      			院系：
      			<div class="layui-input-inline" style="width:100px;">
        			<select name="xueyuan" id="xueyuan" lay-verify="" lay-search="">
				         <option value="">学院</option>
				         <option value="教育学院">教育学院</option>
				         <option value="音乐学院">音乐学院</option>
				    </select>
      			</div>
      			<div class="layui-input-inline" style="width:160px;">
        			<select name="major" id="major" lay-verify="" lay-search="">
				         <option value="">专业</option>
				         <option value="教育技术学">教育技术学</option>
				         <option value="学前教育">学前教育</option>
				    </select>
      			</div>
    		</div>
		 	
		  	<div class="layui-inline">
			  	<button class="layui-btn" data-type="reload" id="reload">搜索</button>
			  	<button class="layui-btn layui-btn-normal" id="add">添加</button>
		  	</div>
		  	
		</div>
    	
    	<table id="Course" lay-filter="test"></table>
    </div>
    
    <div id="detailView" style="display: none; padding-top: 10px;"></div>
    <form class="layui-form" id="createView" lay-filter="createView" action="" style="display: none; padding-top: 20px;"></form>
    
    <form class="layui-form" id="editView" lay-filter="editView" action="" style="display: none; padding-top: 20px;"></form>
    
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
	<script>
		layui.use(['table', 'layer', 'laytpl', 'form', 'laydate'], function(){
		  var table = layui.table;
		  var layer = layui.layer;
		  var laytpl = layui.laytpl;
		  var form = layui.form;
		  var laydate = layui.laydate;
		  
		  //第一个实例
		  var tableIns = table.render({
		    elem: '#Course'
		    ,height: 471
		    ,method: 'post'
		    ,url: 'course/findCourseByPage.action' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'cid', title: '课程ID', sort: true, minWidth:130}
		      ,{field: 'cname', title: '名称', sort: true, minWidth:130}
		      ,{field: 'tname', title: '教师', sort: true, minWidth:90} 
		      ,{field: 'sclass', title: '适用班级', minWidth:100}
		      ,{field: 'startdateStr', title: '开课', sort: true, width:110}
		      ,{field: 'state', title: '状态', sort: true, width:90}
		      ,{field: 'csnum', title: '排课数', sort: true, width:95}
		      ,{field: 'weeksum', title: '总周数', sort: true, width:95}
		      ,{field: 'major', title: '专业', minWidth:120}
		      ,{fixed: 'right', title: '数据操作', width: 210, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
		  
		  $('#refresh').on('click', function(){
			$(".layui-laypage-btn").click()
			layer.msg('刷新完了');
		  });
		  
		  var scid = $('#cid');
		  var scname = $('#cname');
		  var ssclass = $('#sclass');
		  var stname = $('#tname');
		  var smajor = $('#major');
		  var sxueyuan = $('#xueyuan');
		  
		  $('#reload').on('click', function(){
		  	// 条件查询
 		  	tableIns.reload({
			  where: { //设定异步数据接口的额外参数，任意设
			    cid: scid.val()
			    ,cname: scname.val()
			    ,sclass: ssclass.val()
			    ,tname: stname.val()
			    ,major: smajor.val()
			    ,xueyuan: sxueyuan.val()
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			}); 
		  });
		  
		  $('#add').on('click', function(){
		  	//添加对象
		  	//
		  	$("#createView")[0].reset();
		  	var cdata = {
				  butclass: ' '
				  ,butfilter: 'createViewSubmit'
				  ,butid: 'createViewSubmit'
				  ,buttext: '立即提交'
				  ,inputclass: ' '
				  ,inputdisabled: ' '
			};
			var createView = document.getElementById('createView'); 
			var editContent = document.getElementById('editContent');
			laytpl(editContent.innerHTML).render(cdata, function (html) {
				//赋值
				createView.innerHTML = html;
			});
			
			
		  	// 弹窗操作
			layer.open({
				type: 1
				,title :'添加课程'
			    ,offset: 'auto' 
			    ,area: ['550px', '480px']
			    ,id: 'create' //防止重复弹出
			    ,content: $("#createView")
			    //,btn: ['确认创建','重置','关闭']
			    ,btnAlign: 'r' //按钮对齐
			    ,shade: 0 //不显示遮罩
			    /* ,yes: function(index, layero){
			      	
				  	
			    },btn2: function(index, layero){
			    	$('#createView').reset()
			    	return false
			  	},btn3: function(index, layero){
			  		layer.close(index);
			  	} */
			});
			
			laydate.render({
    			elem: '#estartdate' //指定元素
  		  	});
		  });
		  
/*  		form.on('submit(createViewSubmit)', function(data){
 		  	var datas = data.field;
		    console.log(datas.ecid);
		    return false;
		  });  */
		  
		  //监听提交
  		  form.on('submit(createViewSubmit)', function(d){
 		  		var data = d.field;
				 $.ajax(
						{
							type:"post",
							url:"course/add.action",
							dataType:"json",
							data:{
								cid: data.ecid
								,cname: data.ecname
							    ,sclass: data.esclass
							    ,tname: data.etname
							    ,weeksum: data.eweeksum
							    ,startdateStr: data.estartdate
							},success : function(result){
								if(result.code == 1){
									layer.closeAll();
									$(".layui-laypage-btn").click()
								}
								layer.msg(result.msg);
								
							}
						});
					return false; 
			});  
		  
		  //监听提交
  		  form.on('submit(editViewSubmit)', function(d){
 		  		var data = d.field;
 		  		console.log(data);
				$.ajax(
						{
							type:"post",
							url:"course/update.action",
							dataType:"json",
							data:{
								cid: data.ecid
								,cname: data.ecname
							    ,sclass: data.esclass
							    ,tname: data.etname
							    ,weeksum: data.eweeksum
							    ,startdateStr: data.estartdate
							},success : function(result){
								if(result.code == 1){
									layer.closeAll();
									$(".layui-laypage-btn").click()
								}
								layer.msg(result.msg);
								
							}
						}); 
					return false;
			});  
		  
		  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的DOM对象
			 
			  if(layEvent === 'detail'){ //查看
			  	// 获取值
			  	$.ajax(
					{
						type:"post",
						url:"course/getCourseById.action",
						dataType:"json",
						data:{
							cid: data.cid
						},success:function(result){
							console.log('成功获取数据:' + result.msg);
							// 渲染视图层
						  	var detailView = document.getElementById('detailView'); 
				  			var detailContent = document.getElementById('detailContent');
							laytpl(detailContent.innerHTML).render(result, function (html) {
					            //赋值
					            detailView.innerHTML = html;
				        	});
						}
					});
				
			  	// 弹窗操作
			    layer.open({
				  	type: 1
				  	,title : '信息'
			        ,offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
			        ,area: ['300px', '530px']
			        ,id: 'detail' //防止重复弹出
			        ,content: $("#detailView")
			        ,btn: '关闭'
			        ,btnAlign: 'r' //按钮对齐
			        ,shade: 0 //不显示遮罩
			        ,yes: function(index){
			          layer.close(index);
			        }
				});
			  } else if(layEvent === 'del'){ //删除
			    layer.confirm('真的删除行么', function(index){
			      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			      layer.close(index);
			      //向服务端发送删除指令
			      $.ajax(
					{
						type:"post",
						url:"course/deleteCourseById.action",
						dataType:"json",
						data:{
							cid: data.cid
						},success:function(result){
							$(".layui-laypage-btn").click()
							layer.msg(result.msg);
						}
					});
			    });
			  } else if(layEvent === 'edit'){ //编辑
			    //do something
		  		var edata = {
				  butclass: 'layui-btn-warm'
				  ,butfilter: 'editViewSubmit'
				  ,butid: 'editViewSubmit'
				  ,buttext: '立即更新'
				  ,inputclass: 'layui-disabled'
				  ,inputdisabled: 'disabled'
				};
			    var editView = document.getElementById('editView'); 
				var editContent = document.getElementById('editContent');
				laytpl(editContent.innerHTML).render(edata, function (html) {
				//赋值
					 editView.innerHTML = html;
				});
				
				laydate.render({
    				elem: '#estartdate' //指定元素
  		  		});
				
			    // 获取值
			  	$.ajax(
					{
						type:"post",
						url:"course/getCourseById.action",
						dataType:"json",
						data:{
							cid: data.cid
						},success:function(result){
							// 渲染视图层
						  	form.val("editView", {
							  "ecid": result.cid
							  ,"ecname": result.cname
							  ,"etname": "2010"
							  ,"esclass": "JJ1511"
							  ,"exueyuan": result.xueyuan
							  ,"emajor": result.major
							  ,"eweeksum": result.weeksum
							  ,"estartdate": result.startdateStr
							})
						}
					});
				 
			  	// 弹窗操作
			    layer.open({
					type: 1
					,title :'编辑课程'
				    ,offset: 'auto'
				    ,area: ['550px', '480px']
				    ,id: 'edit' //防止重复弹出
				    ,content: $("#editView")
				    ,shade: 0 //不显示遮罩
				});
				
			    /* //同步更新缓存对应的值
			    obj.update({
			      cid: '123'
			      ,cname: 'xxx'
			    }); */
			  } else if(layEvent === 'courseSub'){//排课
			  	window.location.href = "main/courseSub.action?cid=" + data.cid + "&cname=" + data.cname + "&weeksum=" + data.weeksum;
			  }
			});
  
			
		  
		});
	</script>
	<script type="text/javascript">
		function edit(Sclass,Start){
		$.ajax(
			{
				type:"post",
				url:"findCourseByPage.action",
				dataType:"json",
				data:{
					Sclass: Sclass,
					Start: Start
				}
			});
		}
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
 		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="courseSub">排课</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="detailContent">
  		<div class="layui-form-item">
		    <label class="layui-form-label">课程号</label>
		    <div class="layui-input-block">
		    	<div class="layui-form-mid">{{d.cid}}</div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">名称</label>
		    <div class="layui-input-block">
		    	<div class="layui-form-mid">{{d.cname}}</div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">教师</label>
		    <div class="layui-input-block">
		    	<div class="layui-form-mid">{{d.tname}}</div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">班级</label>
		    <div class="layui-input-block">
		    	<div class="layui-form-mid">{{d.sclass}}</div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">创建于</label>
		    <div class="layui-input-block">
		    	<div class="layui-form-mid">{{d.createdateStr}}</div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">开课于</label>
		    <div class="layui-input-block">
		    	<div class="layui-form-mid">{{d.startdateStr}}</div>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">总周数</label>
		    <div class="layui-input-block">
		    	<div class="layui-form-mid">{{d.weeksum}}</div>
		    </div>
		</div>
	</script>
	<script type="text/html" id="editContent">
		<div class="layui-form-item">
	      <div class="layui-inline">
	      	<label class="layui-form-label">编号</label>
	      	<div class="layui-input-inline" style="width:160px">
	      		<input type="text" name="ecid" placeholder="请输入编号" lay-verify="required|number" autocomplete="off" class="layui-input {{d.inputclass}}" {{d.inputdisabled}}>
	      	</div>
	      </div>
	      <div class="layui-inline">
	      	<label class="layui-form-label">名称</label>
	      	<div class="layui-input-inline" style="width:160px">
	      		<input type="text" name="ecname" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	      	</div>
	      </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">院系</label>
	    <div class="layui-inline">
      		<div class="layui-input-inline" style="width:100px; margin-right: 10px;">
        		<select name="exueyuan" lay-verify="required" lay-search="">
					<option value="">学院</option>
					<option value="教育学院">教育学院</option>
				</select>
      		</div>
      		<div class="layui-input-inline" style="width:160px; margin-right: 10px;">
        		<select name="emajor" lay-verify="required" lay-search="">
				    <option value="">专业</option>
				    <option value="教育技术学">教育技术学</option>
				    <option value="学前教育">学前教育</option>
				</select>
      		</div>
    	</div>
	  </div>

	  
	  <div class="layui-form-item">
	      
	      <div class="layui-inline">
	      	<label class="layui-form-label">班级</label>
		    <div class="layui-input-inline" style="width:160px">
		      <select name="esclass" lay-verify="required" lay-filter="aihao">
		      	<option value="">请选择</option>
		      	<option value="JJ1511">教技1511</option>
		        <option value="JJ1512">教技1512</option>
		        <option value="XQ1411">教技1411</option>
		        <option value="XQ1511">教技1511</option>
		      </select>
		    </div>
	      </div>

		  <div class="layui-inline">
		    <label class="layui-form-label">教师</label>
	    	<div class="layui-input-inline" style="width:160px">
		  		<select name="etname" lay-verify="required" lay-search="">
					<option value="">请选择</option>
					<option value="2010">蔡老师</option>
					<option value="2018">独木林空</option>
		  		</select>
	   		</div>
	      </div>

	  </div>
	  
	  <div class="layui-form-item">
	      <div class="layui-inline">
	      	<label class="layui-form-label">开课</label>
	      	<div class="layui-input-inline" style="width:160px">
	      		<input type="text" name="estartdate" lay-verify="required|date" placeholder="yyyy-MM-dd" id="estartdate" autocomplete="off" class="layui-input">
	      	</div>
	      </div>
	      <div class="layui-inline">
	      	<label class="layui-form-label">周数</label>
	      	<div class="layui-input-inline" style="width:160px">
	      		<input type="text" name="eweeksum" lay-verify="required|number" placeholder="14" autocomplete="off" class="layui-input">
	      	</div>
	      </div>
	  </div>

	  <div class="layui-form-item" style="text-align:center; margin-top: 120px;">
	  	<button class="layui-btn {{d.butclass}}" lay-submit="" lay-filter="{{d.butfilter}}" id="{{d.butid}}">{{d.buttext}}</button>
	  	<button class="layui-btn layui-btn-primary" type="reset">重置</button>
	  	<button class="layui-btn layui-btn-primary" type="button" onclick="layer.closeAll()">关闭</button>
	  </div>
	</script>
  </body>
</html>
